<template>
  <div style="height: 100%">
    <el-container style="height: 100vh">

      <el-aside width="sideWidth + 'px'" style="background-color: rgb(238, 241, 246);height: 100%;overflow-x: hidden">
        <Aside :collapse="isCollapse"  :logoTextShow="logoTextShow" />
        <!--Aside 是被封装的侧栏-->
      </el-aside>

      <el-container>
        <el-header style="border-bottom: 1px solid #ccc;">
          <Header :collapseBtnClass="collapseBtnClass" @isCollapsed="collapse"/>
          <!--Header 是被封装的头部栏-->
        </el-header>

        <el-main>
          <!--表示当前页面的子路由会在 router-view 里面展示-->
          <router-view/>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
import request from "@/utils/request";
import Aside from "@/components/Aside";
import Header from "@/components/Header";

export default {
  name: 'HomeView',
  components: {
    Header,
    Aside,
    HelloWorld
  },
  data(){


    return {
      collapseBtnClass:'el-icon-s-fold',
      isCollapse:false,
      sideWidth:200,
      logoTextShow:true,
      //上方为侧栏的样式

    }
  },

  //侧栏的样式
  methods:{
  collapse(value){ //点击收缩侧栏
    this.isCollapse = value;
   }
  }
}
</script>
